<template>
  <div id="CarDetails" >
    <v-title :title="status === 'look' ? '项目管理周报详情' : `新增项目管理周报--第${currentWeek}周`"></v-title>

    <div v-if="status === 'edit'" class="btn-group" style="position: relative;">
      <div id="group">
        <el-row class="bgColor">
          <el-col :xs="24" :sm="24" :lg="24" class="toFlex">
            <div class="item">
              <!-- <label for="cascader">选择项目:</label>
              <el-cascader
                placeholder="请选择项目"
                :options="singleSelector"
                filterable
                :show-all-levels="false"
                v-model="singleSelected"
                @change="singleChange"
                style="margin-left: 10px;"
                id="cascader"
              >
              </el-cascader> -->
<!--
              <label for="weeks" style="margin:auto 15px;">选择周:</label>
              <el-date-picker
                id="weeks"
                style="margin: auto 0;"
                @change="changeWeek"
                v-model="weeks"
                type="week"
                format="yyyy 第 WW 周"
                placeholder="选择周">
              </el-date-picker>             -->
            </div>
          </el-col>
          <el-button class="save" @click="save" type="primary" size="medium" :disabled="isDisabled">保存</el-button>
          <div class="upbutton">
            <el-upload
              class="upload-demo"
              :action="urlLink"
              name="excel"
              ref="upLoadFile"
              :before-upload="beforeAvatarUpload"
              accept=".pdf, .doc, .docx, .xls, .xlsx"
              :limit="999"
              :multiple="true"
              :on-error="erroring"
              :before-remove="beforeRemove"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              :file-list="fileList"
              :http-request="handUploadFile"
              >
              <el-button size="small" type="success" >上传附件</el-button>
              <div slot="tip" class="el-upload__tip" style="font-size:10px;color:red">附件不超过15M</div>
            </el-upload>
          </div>

        </el-row>
      </div>
      <!-- <v-condition></v-condition> -->

    </div>

    <div class="baseInfo marT">
      <el-divider content-position="left">项目基础信息</el-divider>
      <el-table
        :border="true"
        :header-cell-style="{background:'#42b1e8'}"
        :data="inputObj.basic_info"
        style="width: 100%"
      >
        <el-table-column
          :label="item"
          align="center"
          v-for="item in list"
          :key="item"
        >
          <template slot-scope="scope">
            <div>{{ inputObj.basic_info[scope.$index][item] }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="total-condition marT">
      <el-divider content-position="left">项目总体状况</el-divider>

      <el-card shadow="always" class="flexing">
        <div class="left">
          <el-alert
            v-if="this.status === 'look'"
            :title="inputObj.project_total_condition ? inputObj.project_total_condition : '暂无内容'"
            type="error"
            effect="dark"
            :closable="false">
          </el-alert>
          <el-input
            v-else
            type="textarea"
            @change='projectTotalConditionChange'
            :autosize="{ minRows: 2, maxRows: 10}"
            placeholder="项目总体状况"
            v-model="inputObj.project_total_condition">
          </el-input>
        </div>

        <div class="right">
          <label for="levels" style="margin:auto 15px;">风险等级:</label>
          <template v-if="status === 'look'">
            <span v-if="inputObj.risk_self_assessment === 1" class="low">低风险</span>
            <span v-else-if="inputObj.risk_self_assessment === 2" class="middle">中风险</span>
            <span v-else class="high">高风险</span>
          </template>
          <el-select v-else clearable v-model="inputObj.risk_self_assessment" placeholder="请选择风险等级" style="margin-top:10px;margin-left:10px" @change='riskSelfAssessmentChange'>
            <el-option
              v-for="item in levelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>

      </el-card>

    </div>

    <div class="projectStatus">
      <el-divider content-position="left">项目状况</el-divider>

      <el-table
        :border="true"
        :header-cell-style="{background:'#42b1e8'}"
        :data="inputObj.project_condition"
        style="width: 100%"
        :cell-style="backFun"
      >
        <el-table-column
          label="分类"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.risk_type }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="风险等级"
          align="center"
        >
          <template slot-scope="scope">
                <div v-if="typeof scope.row.risk_level == 'string'">
                  {{ scope.row.risk_level }}
                </div>
                <div v-else>
                  <div v-for="(v, k) in scope.row.risk_level" :key="k">
                    <span> {{ k }}</span> :
                    <span v-if="v === '低风险'" class="low"> {{ v }}</span>
                    <span v-else-if="v === '中风险'" class="middle">
                      {{ v }}
                    </span>
                    <span v-else-if="v === '高风险'" class="high">
                      {{ v }}
                    </span>
                    <span v-else> {{ v }} </span>  
                  </div>
                </div>
          </template>
        </el-table-column>

        <el-table-column
          label="风险责任人"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.risk_owner }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="风险原因"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="typeof scope.row.risk_level == 'string'">
              {{ scope.row.risk_level }}
            </div>
            <div v-else>
              <div v-for="(v, k) in scope.row.risk_reason" :key="k">
                {{ k }} :
                {{ v }}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="风险计划解决时间"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="status === 'look'">
              {{ scope.row.risk_solution_time }}
            </div>
            <div v-else>
              <el-date-picker
                v-model="scope.row.risk_solution_time"
                type="date"
                @change='projectCondition'
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="风险解决方案"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="status === 'look'" v-html="scope.row.risk_handle_progress"></div>
            <div v-else>
              <el-input
                type="textarea"
                autosize
                placeholder="请输入风险解决方案"
                @change='projectCondition'
                v-model="scope.row.risk_handle_progress">
              </el-input>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="风险解决层级"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="status === 'look'">
              {{ scope.row.risk_solution_level }}
            </div>
            <div v-else>
              <el-select v-model="scope.row.risk_solution_level" placeholder="请选择" @change="chengeselectFn3($event,scope.$index,scope.row)" clearable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                 >
              </el-option>
            </el-select>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="high-light">
      <el-divider content-position="left">风险HighLight</el-divider>
      <!-- <div class="high-input">
        <b style="display: block;color: #999;margin-bottom: 10px;">Top1:</b>
        <el-alert
          v-if="this.status === 'look'"
          :title="inputObj.risk_highlight.risk_top_one ? inputObj.risk_highlight.risk_top_one : '暂无内容'"
          type="error"
          effect="dark"
          :closable="false">
        </el-alert>
        <template v-else>
          <el-input
            v-if="inputObj.risk_highlight"
            type="textarea"
            autosize
            placeholder="TOP1"
            v-model="inputObj.risk_highlight.risk_top_one">
          </el-input>
        </template>

        <b class="marT" style="display: block;color: #999;margin-bottom: 10px;">Top2:</b>
        <el-alert
          v-if="this.status === 'look'"
          :title="inputObj.risk_highlight.risk_top_two ? inputObj.risk_highlight.risk_top_two : '暂无内容'"
          type="error"
          effect="dark"
          :closable="false">
        </el-alert>
        <template v-else>
          <el-input
            v-if="inputObj.risk_highlight"
            type="textarea"
            autosize
            placeholder="TOP2"
            v-model="inputObj.risk_highlight.risk_top_two">
          </el-input>
        </template>

        <b class="marT" style="display: block;color: #999;margin-bottom: 10px;">Top3:</b>
        <el-alert
          v-if="this.status === 'look'"
          :title="inputObj.risk_highlight.risk_top_three ? inputObj.risk_highlight.risk_top_three : '暂无内容'"
          type="error"
          effect="dark"
          :closable="false">
        </el-alert>
        <template v-else>
          <el-input
            v-if="inputObj.risk_highlight"
            type="textarea"
            autosize
            placeholder="TOP3"
            v-model="inputObj.risk_highlight.risk_top_three">
          </el-input>
        </template>
      </div> -->
      <el-table
        :border="true"
        :header-cell-style="{background:'#42b1e8'}"
        :data="inputObj.risk_highlight"
        style="width: 100%"
        :cell-style="backFun"
      >
        <el-table-column
          label="Top级别"
          align="center"
        >
         <template slot-scope="scope">
           <div v-if="status === 'look'">
              {{ scope.row.top_level }}
            </div>
            <div v-else>
               <el-select  v-model="scope.row.top_level" placeholder="请选择" @change="chengeselectFn1($event,scope.$index,scope.row)" clearable>
                <el-option
                  v-for="item in optionsTop"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>

       <el-table-column
          label="风险描述"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="status === 'look'" v-html="scope.row.risk"></div>
            <div>
              <el-input
                type="textarea"
                autosize
                placeholder="风险描述"
                @change='riskHighlightChange'
                v-model="scope.row.risk">
              </el-input>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="风险责任人"
          align="center"
        >
          <template slot-scope="scope">
              <div v-if="status === 'look'">
                {{ generate(scope.row.risk_owner).join(',') }}
              </div>
              <div v-else>
                <el-select
                  v-model="scope.row.ownerList"
                  multiple
                  filterable
                  remote
                  placeholder="请输入"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  @blur="blur"
                  @change="change(scope.$index, $event)"
                  >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                      <span style="float: left">{{ item.label }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </div>
            </template>
        </el-table-column>


        <el-table-column
          label="解决方案"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="status === 'look'" v-html="scope.row.doc"></div>
            <div v-else>
              <el-input
                type="textarea"
                @change='riskHighlightChange'
                autosize
                placeholder="请输入解决方案"
                v-model="scope.row.doc">
              </el-input>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="解决时间"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="status === 'look'">
              {{ scope.row.time }}
            </div>
            <div v-else>
              <el-date-picker
                v-model="scope.row.time"
                type="date"
                @change='riskHighlightChange'
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="解决层级"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="status === 'look'">
              {{ scope.row.level }}
            </div>
            <div v-else>
              <el-select v-model="scope.row.level" placeholder="请选择" @change="chengeselectFn($event,scope.$index,scope.row)" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
                </el-option>
            </el-select>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="风险状态"
          align="center"
        >
        <template slot-scope="scope">
            <div v-if="status === 'look'">
              {{ scope.row.status }}
            </div>
            <el-select v-model="scope.row.status" placeholder="请选择"  @change="chengeselectFn2($event,scope.$index,scope.row)">
              <el-option
                v-for="item in optionsStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

      </el-table>
      <el-button
        type="primary"
        style="float: right; margin-top: 4px"
        @click="addFn()"
        v-if="isShow">
        新增
      </el-button>
    </div>

    <div class="now">
      <el-divider content-position="left">本周主要成果</el-divider>
      <el-alert
        v-if="this.status === 'look'"
        :description="inputObj.current_week_outcome ? inputObj.current_week_outcome : '暂无内容'"
        type="success"
        :closable="false"
        >
      </el-alert>
      <el-input
        v-else
        type="textarea"
        :autosize="{ minRows: 3, maxRows: 10}"
        placeholder="本周主要成果"
        @change='currentWeekOutcomeChange'
        v-model="inputObj.current_week_outcome">
      </el-input>
    </div>

    <div class="next">
      <el-divider content-position="left">下周工作计划</el-divider>
      <el-alert
        v-if="this.status === 'look'"
        :description="inputObj.next_week_plan ? inputObj.next_week_plan : '暂无内容'"
        type="success"
        :closable="false"
        >
      </el-alert>
      <el-input
        v-else
        type="textarea"
        :autosize="{ minRows: 3, maxRows: 10}"
        placeholder="下周工作计划"
        @change='nextWeekPlanChange'
        v-model="inputObj.next_week_plan">
      </el-input>
    </div>

<!--     <div class="selfCheck">-->
<!--          <el-divider content-position="left">项目自检</el-divider>-->
<!--          <template >-->
<!--            <div style="margin-bottom: 10px; color:red">-->
<!--              {{inputObj.check_num}}-->
<!--            </div>-->
<!--          </template>-->
<!--            <el-table-->
<!--              :data="inputObj.check"-->
<!--              border-->
<!--              :header-cell-style="{ background: '#42B1E8' }"-->
<!--              style="margin-top: 20px"-->
<!--            >-->
<!--              <el-table-column property="num" label="编号" width="50" align="center">-->
<!--                <template slot-scope="scope">-->
<!--                   <div>{{ tableArr1[scope.$index]}}</div>-->
<!--                </template>-->
<!--              </el-table-column>-->

<!--              <el-table-column-->
<!--                label="检查项"-->
<!--                width="550"-->
<!--                align="center"-->
<!--              >-->
<!--                <template slot-scope="scope">-->
<!--                   <div>{{  tableArr3[scope.$index] }}</div>-->
<!--                </template>-->
<!--              </el-table-column>-->

<!--              <el-table-column-->
<!--                label="结果"-->
<!--                width="150"-->
<!--                align="center"-->
<!--              >-->
<!--                <template slot-scope="scope" >-->
<!--                  <div >-->
<!--                    {{ scope.row[1].result }}-->
<!--                  </div>-->

<!--                </template>-->
<!--              </el-table-column>-->

<!--              <el-table-column-->
<!--                label="说明"-->
<!--                width="300"-->
<!--                align="center"-->
<!--              >-->
<!--                <template slot-scope="scope">-->
<!--                  <div>-->
<!--                    {{ scope.row[1].explain }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->

<!--              <el-table-column-->
<!--                label="对策"-->
<!--                width="300"-->
<!--                align="center"-->
<!--              >-->
<!--                <template slot-scope="scope">-->
<!--                  <div>-->
<!--                    {{ scope.row[1].countermeasure }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->

<!--              <el-table-column label="解决时间" align="center" width="284">-->
<!--                <template slot-scope="scope">-->
<!--                  <div>-->
<!--                    {{ scope.row[1].fix_time }}-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--        </div>-->

  </div>
</template>

<script>
  import http from '@/views/sys/axios'
  import VTitle from '@/views/sys/internetThings/title'
  import Moment from 'moment'
  import { getHeader } from '@/app.config';
  import { Loading } from 'element-ui'
  import { mapMutations, mapState } from 'vuex';

  export default {
    name: 'CarDetails',
    components: {
      VTitle
    },
    // beforeRouteEnter(to, from, next) {
    //   next(vm => {
    //     vm.id && vm.editInitRes()
    //   })
    // },
    data() {
      return {
        isShow:false,
        isDisabled:false,
        loading: false,
        options1:[],
        optionsPerson:[],
        optionsStatus:[
          {
            value: '1',
            label: '关闭',
          },
          {
            value: '2',
            label: '非关闭',
          },
        ],
        optionsTop:[
          {
            value: '1',
            label: 'Top1',
          },
          {
            value: '2',
            label: 'Top2',
          },
          {
            value: '3',
            label: 'Top3',
          },
        ],
        value:'',
        options: [
        {
          value: '1',
          label: '项目组内解决',
        },
        {
          value: '2',
          label: '事业部依赖',
        },
        {
          value: '3',
          label: '事业群依赖',
        },
        {
          value: '4',
          label: '客户部依赖',
        },
      ],
        tableArr3:[],
        tableArr1:[1,2,3,4,5,6,7,8],
        tableArr2:[
          'PM是否按时组织实施了项目周会',
          'PM是否在项目管理看板更新了进度，成本等相关KPI，对项目进度，商务，成本等方面的风险做了说明与判断',
          '架构师，研发Leader是否在项目管理看板更新了技术领域KPI，对项目技术风险做了说明与判断',
          '测试Leader是否在项目管理看板更新了测试相关KPI，对项目质量风险做了说明与判断',
          '各领域负责人是否在周会上确认了当前阶段需要达成KPI目标和交付件的进展，并识别风险与问题向PM汇报，给出依赖与对策或建议',
          'PM是否基于项目管理看板填写结果，对当前阶段点各领域KPI目标的状况进行了跟踪与确认',
          'PM是否确认各领域的风险和课题，以及对策和依赖。协助各领域推动解决风险和课题',
          '是否按照阶段点计划，在周会上跟踪了阶段点实施的必要动作（建立任务，领域自检，问题对策与跟踪等）',
        ],
        data :[],
        headers: getHeader(),
        fileList: [],
        loadingbut: false,
        loadingbuttext:'保存',
        singleSelector: [],
        singleSelected: null,
        levelOptions: [
          {
            value: 3,
            label: '高风险'
          },
          {
            value: 2,
            label: '中风险'
          },
          {
            value: 1,
            label: '低风险'
          }
        ],
        inputObj: {},
        id: '',
        weeks: '',
        yearWeek: '',
        urlLink: '',
        formData: '',
        currentWeek: Moment().isoWeek() + 1,
        fileData: ''
      }
    },
    computed: {
      list() {
        if(this.inputObj.basic_info && this.inputObj.basic_info.length) {
          return Object.keys(this.inputObj.basic_info[0])
        }
      },
      reportId() {
        return this.$route.query.id || ''
      },
      status() {
        return this.$route.query.status || ''
      },
      ...mapState({
        projectReportDetail: (state) => state.conditions.projectReportDetail,
      }),
    },
    created() {
      this.conditionRes()
    },
    mounted() {
      this.$nextTick(() => {
        if(this.status == 'look') {
          this.initRes()
        }
      })
    },
    methods: {
      ...mapMutations('conditions', [
        'setProjectReportDetail'
      ]),
      addFn(){
        let tmpVal = []
        this.inputObj.risk_highlight.push({

        })
        if(this.inputObj.risk_highlight.length >= 3 ) {
          this.isShow = false
        }
      },
      deleteRow(index, rows) {
        rows.splice(index, 1)
      },
      change(index, val) {
        const obj = this.cache.filter(item => item.value === val[val.length - 1])
        const risk_owner = [...this.inputObj.risk_highlight[index].risk_owner, ...obj]
        this.$set(this.inputObj.risk_highlight[index], 'risk_owner', risk_owner)
        this.setProjectReportDetail({
          risk_highlight: this.inputObj.risk_highlight
        })
      },
      generate(arr) {
        if(arr.length) {
          const list = arr.map(item => item.label)
          return list
        } else {
          return []
        }
      },
      blur() {
        this.options1 = []
      },
      async remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          this.options1 = []
          this.getStateResult(query)
        } else {
          this.options1 = [];
        }
      },
      getStates(name) {
        return http.get(`/api/account/user/query?name=${name}`)
      },
      async getStateResult(name) {
        try {
          const { code, user_list } = await this.getStates(name)
          if(code === 200) {
            this.loading = false
            this.options1 = user_list
            this.cache = user_list
          }
        } catch (err) {
          throw new Error(err)
        }
      },
      chengeselectFn3(e,index,row){
          if(e=='1'){
            this.value=''
            this.value='项目组内解决'
            row.value = '项目组内解决'
          }else if(e=='2'){
            this.value=''
            this.value='事业部依赖'
            row.value = '事业部依赖'
          }else if(e=='3'){
            this.value=''
            this.value='事业群依赖'
            row.value = '事业群依赖'
          }else if(e=='4'){
            this.value=''
            this.value='客户部依赖'
            row.value = '客户部依赖'
          }
        this.setProjectReportDetail({
          project_condition: this.inputObj.project_condition
        })
          // this.$set(inputObj.project_condition,index,row)
        },
      chengeselectFn2(e,index,row){
          if(e=='1'){
            this.value=''
            this.value='关闭'
            row.value = '关闭'
            this.isShow = true
            this.deleteRow(index,this.inputObj.risk_highlight)
          }else if(e=='2'){
            this.value=''
            this.value='非关闭'
            row.value = '非关闭'
          }
      },
      chengeselectFn1(e,index,row){
          if(e=='1'){
            this.value = ''
            this.value = 'Top1'
            row.value  =  'Top1'
          }else if(e == '2'){
            this.value = ''
            this.value = 'Top2'
            row.value  =  'Top2'
          }else if(e == '3'){
            this.value = ''
            this.value = 'Top3'
            row.value  =  'Top3'
          }
        this.setProjectReportDetail({
          risk_highlight: this.inputObj.risk_highlight
        })
        },
      chengeselectFn(e,index,row){
          if(e=='1'){
            this.value=''
            this.value='项目组内解决'
            row.value = '项目组内解决'
          }else if(e=='2'){
            this.value=''
            this.value='事业部依赖'
            row.value = '事业部依赖'
          }else if(e=='3'){
            this.value=''
            this.value='事业群依赖'
            row.value = '事业群依赖'
          }else if(e=='4'){
            this.value=''
            this.value='客户部依赖'
            row.value = '客户部依赖'
          }
        this.setProjectReportDetail({
          risk_highlight: this.inputObj.risk_highlight
        })
          // this.$set(inputObj.project_condition,index,row)
        },
       handUploadFile(content, data) {
            const { file } = content
            let formData = new FormData();
            // formData.append('data', JSON.stringify(data));
            this.urlLink = `/api/report/project/weekly/report/data`
            this.fileList.push(content.file)
            let list = this.fileList.map((v,i) => {
              return v.name
            })
            this.fileData = {
              'file_list': list
            }

            formData.append('file', content.file)
            this.formData = formData
          }
       ,
      handleSuccess(res) {
        if(res) {
          this.$message({
            message: res,
            type: 'success'
          });
        }
      },
      erroring(err) {
        if(err) {
          this.$message({
            message: err,
            type: 'error'
          });
        }
      },
       handleRemove(file, fileList) {
        this.formData = ''
      },
      // handleChange(file, fileList) {
      //   this.fileList = fileList.slice(-3);
      // },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      beforeAvatarUpload(file) {
        const isLt15M = file.size / 1024 / 1024 < 15
        this.fileStatus = true
        if (!isLt15M) {
          this.$message({
            message: '导入的文件不能大于15M!',
            type: 'error'
          });
          this.fileStatus = false
          return
        }

        let name = file.name;
        let fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
        // if (fileName != "xlsx" && fileName != "xls") {
        //   this.$message({
        //     message: '请选择正确得Excel格式文件上传!',
        //     type: 'error'
        //   });
        //   this.fileStatus = false
        //   return
        // }

      },
      // 改变单元格背景色
      backFun({row, columnIndex}) {
        if(columnIndex === 1) {
          if(row.risk_level && row.risk_level === '低风险') {
            return 'background: #67c23a;color: #fff'
          } else if(row.risk_level && row.risk_level === '中风险') {
            return 'background: #e6a23c;color: #fff'
          } else if(row.risk_level && row.risk_level === '高风险') {
            return 'background: #e4393c;color: #fff'
          }
        }
      },
      // 选择周
      changeWeek() {
        let year, week
        year = new Date().getFullYear()
        week = Moment(this.weeks).utcOffset(480).format("WW")
        this.yearWeek = `${year}-${week}`

        this.editInitRes()
      },
      condition() {
        return http.get(`/api/report/project/weekly/project/list`)
      },
      async conditionRes() {
        try {
          const { code, result } = await this.condition()
          if(code === 200) {
            this.singleSelector = result
            const val1 = this.singleSelector[0].value
            const val2 = this.singleSelector[0].children[0].value
            const val3 = this.singleSelector[0].children[0].children[0].value
            this.singleSelected = [val1, val2, val3]
            this.id = this.computeCondition(this.singleSelector, this.singleSelected)
          }
        } catch(err) {
          throw err
        }
      },
      // 处理筛选条件数据
      computeCondition(list, filter) {
        if(Array.isArray(list) && !list.length) {
          return []
        }
        const outer = list.filter(item => item.value === filter[0]) // 事业群
        let mider = [] // 事业部
        let inner = [] // 项目

        if(outer[outer.length - 1].children) {
          let miderList = outer[outer.length - 1].children
          mider = miderList.filter(item => item.value === filter[1])

          if(mider[mider.length - 1].children) {
            let innerList = mider[mider.length - 1].children
            inner = innerList.filter(item => item.value === filter[2])
          }
        }
        const { value } = inner[0]
        return value
      },
      // 项目切换后的逻辑
      singleChange(val) {
        this.id = this.computeCondition(this.singleSelector, val)
      },

      saveReturn() {
        let formData = this.formData
        let data = {}
        let projectConditionCanContinue = true
        let projectRiskHighLightCanContinue = true
        const obj = this.inputObj
        const project_condition = obj.project_condition
        project_condition.forEach(async item => {
          // const riskLevelList = Object.keys(item.risk_level).map(key => item.risk_level[key])
          const riskText = item.risk_level[`${Object.keys(item.risk_level)[0]}`]
          if (riskText === '中风险' || riskText === '高风险') {
            if (!item.risk_solution_time) {
              projectConditionCanContinue = false
              await this.$message.warning('项目状况：风险等级中、高风险必须填写风险计划解决时间')
            }
            if (!item.risk_handle_progress) {
              projectConditionCanContinue = false
              await this.$message.warning('项目状况：风险等级中、高风险必须填写风险解决方案')
            }
            if (!item.risk_solution_level) {
              projectConditionCanContinue = false
              await this.$message.warning('项目状况：风险等级中、高风险必须选择风险解决层级')
            }
          }
        })
        if (!projectConditionCanContinue) {
          this.isDisabled = false
          return
        }

        this.inputObj.risk_highlight.forEach(async item => {
         if(!item.risk_owner){item.risk_owner = []}
         item.risk_owner = item.risk_owner.filter(ow => {
          const index = item.ownerList.findIndex(idx => ow.label == idx || ow.value == idx)
            if(index == -1) {
              return false
            }
            return true
        })
          if (item.risk) {
            if (!item.ownerList.length) {
              projectRiskHighLightCanContinue = false
              await this.$message.warning('风险HighLight：请选择风险责任人')
            }
            if (!item.doc) {
              projectRiskHighLightCanContinue = false
              await this.$message.warning('风险HighLight：请输入风险解决方案')
            }
            if (!item.time) {
              projectRiskHighLightCanContinue = false
              await this.$message.warning('风险HighLight：请选择解决时间')
            }
            if (!item.level) {
              projectRiskHighLightCanContinue = false
              await this.$message.warning('风险HighLight：请选择解决层级')
            }
            if (!item.status) {
              projectRiskHighLightCanContinue = false
              await this.$message.warning('风险HighLight：请选择风险状态')
            }
          }
      })

        if (!projectRiskHighLightCanContinue) {
          this.isDisabled = false
          return
        }

        Object.keys(obj).forEach(item => {
          if(item === 'basic_info') {
            // delete obj[item]
          }
        })
        if (!formData) {
          formData = new FormData()
        }
        data = Object.assign(obj,this.fileData)
        formData.append('data', JSON.stringify(data))

        return http.post(`/api/report/project/weekly/report/data?projectId=${this.id}&week=${this.yearWeek}`, formData)
      },
      async save() {
        this.isDisabled = true
        try {
          const { code, msg } = await this.saveReturn()

          if(code === 200) {
            this.setProjectReportDetail({
              project_total_condition: '',
              risk_self_assessment: '',
              current_week_outcome: '',
              next_week_plan: '',
              project_condition: [],
              risk_highlight: [],
            })
            this.$router.push({
              path: '/car/ai-car/car-paper'
            }),
            this.$message({
              message: '保存成功',
              type: 'success',
            });
          }
          setTimeout(() => {
              this.isDisabled = false;//响应后延迟几秒回复正常；
          }, 2500)
        } catch(err) {
            throw err
        }
      },
      editInit(id) {
        let tepId = localStorage.getItem('tmpProid',this.pjId)
        this.id = Number(tepId)
        return http.get(`/api/report/project/weekly/report/data?projectId=${this.id}&week=${this.yearWeek}`)
      },
      async editInitRes(id) {
        try {
          const { code, data } = await this.editInit(id)
          if(code === 200) {
            this.inputObj = data
            const { project_total_condition, risk_self_assessment, project_condition, risk_highlight, current_week_outcome, next_week_plan } = this.projectReportDetail
            if (project_total_condition) {
              this.inputObj.project_total_condition = project_total_condition
            }
            if (risk_self_assessment) {
              this.inputObj.risk_self_assessment = risk_self_assessment
            }
            if (next_week_plan) {
              this.inputObj.next_week_plan = next_week_plan
            }
            if (project_condition.length) {
              this.inputObj.project_condition = project_condition
            }
            if (risk_highlight.length) {
              this.inputObj.risk_highlight = risk_highlight
            }
            if (current_week_outcome) {
              this.inputObj.current_week_outcome = current_week_outcome
            }
            this.inputObj.risk_highlight = this.inputObj.risk_highlight.map(item => {
            if(!item.risk_owner) {item.risk_owner = []}
            const ownerList = item.risk_owner.map(ow => ow.label)
            return{
              ...item,
                ownerList
            }
          })
             data.check.map((v,i) => {
            this.checkIndex = v[0]
            this.tableArr3.push(this.tableArr2[this.checkIndex])
          })
          }
        } catch(err) {
          throw err
        }
      },
      init() {
        const data = {
          report_id: [this.reportId],
          isReportIDList: true
        }
        return http.post(`/api/report/project/weekly/detail`, data)
      },
      async initRes() {
        try {
          const { code, data } = await this.init()
          if(code === 200) {
            this.inputObj = data
            if(this.inputObj.risk_highlight.length < 3) {
              this.isShow = true
          } else{
            this.isShow = false
          }
          }
        } catch(err) {
          throw err
        }
      },
      projectTotalConditionChange(val) {
        this.setProjectReportDetail({
          project_total_condition: this.inputObj.project_total_condition
        })
      },
      riskSelfAssessmentChange(val) {
        this.setProjectReportDetail({
          risk_self_assessment: this.inputObj.risk_self_assessment
        })
      },
      projectCondition(val) {
        this.setProjectReportDetail({
          project_condition: this.inputObj.project_condition
        })
      },
      riskHighlightChange(val) {
        this.setProjectReportDetail({
          risk_highlight: this.inputObj.risk_highlight
        })
      },
      currentWeekOutcomeChange(val) {
        this.setProjectReportDetail({
          current_week_outcome: this.inputObj.current_week_outcome
        })
      },
      nextWeekPlanChange(val) {
        this.setProjectReportDetail({
          next_week_plan: this.inputObj.next_week_plan
        })
      }
    },
    watch: {
      id(newval) {
        if(this.status === 'edit' && newval) {
          this.editInitRes()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  #person{
    margin-left: 4px;
    margin-bottom: 10px;
  }
  .upbutton{
    position: absolute;
    right: 88px;
    top: 2px;
    width: 200px;
    overflow: hidden;
    height: 200px;
    z-index: 999;
  }
  // .upload-demo{
  //   // display: inline-block;
  //   // margin-left: 88%;
  //   position: absolute;
  //   top: 50%;
  //   right: 88px;
  //   -webkit-transform: translate(-50%, -50%);
  //   transform: translate(-50%, -50%);
  // }
  #CarDetails{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    .save{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(-50%, -50%);
    }
  }
  #group{
    .bgColor{
      background: #ffffff;
      padding: 20px;
      .toFlex{
        display: flex;
        .item{
          display: flex;
          flex: 1;
          label{
            margin: auto 0;
          }
          #cascader, #selectd{
            margin: auto 0;
            width: 20%;
            &.mwidth{
              width: 23%;
            }
          }
          .item2{
            margin-left: 20px;
          }
        }
      }
    }
  }
  /deep/ .el-card__body{
      display: flex;
      .left{
        width: 65%;
        margin: auto 0;
      }
      .right{
        flex: 1;
        margin: auto 0;
      }
    }
  /deep/ .el-alert{
    width: 60%;
  }
  /deep/ .el-alert__title {
    font-size: 16px;
    line-height: 24px;
  }
  /deep/ .el-alert__description {
    font-size: 16px;
    line-height: 24px;
  }
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  /deep/ .el-table colgroup.gutter{
    display: table-cell!important;
  }
  /deep/ .el-table thead {
    color: #fff;
  }
  /deep/ .el-divider__text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    background-color: #e6a23c;
    padding: 6px 16px;
  }
  /deep/ .el-divider--horizontal {
    margin: 40px 0;
    height: 2px;
  }
  .marT{
      margin-top: 20px;
  }
  .high{
    color: #e4393c;
  }
  .middle{
    color: #e6a23c;
  }
  .low{
    color: #67c23a;
  }
</style>
